<template>
  <div>
    <header>
      <nuxt-link to="/">
        <!-- 知涯志愿 -->
      </nuxt-link>
      <div class="right-bar">
        <ul class="">
          <li>
            <nuxt-link to="/">首页</nuxt-link>
          </li>
          <!-- <li>
            <nuxt-link to="/xuanke">新高考选科</nuxt-link>
          </li> -->
          <li>
            <nuxt-link to="/xuankecode">新高考选科</nuxt-link>
          </li>
          <!-- <li>
            <nuxt-link to="/volunteer">志愿填报</nuxt-link>
          </li> -->
          <li>
            <nuxt-link to="/zhiyuan">志愿填报</nuxt-link>
          </li>
          <li v-show="!authInfo.token">
            <nuxt-link to="/login?type=login">登录</nuxt-link>
          </li>
          <li v-show="!authInfo.token">
            <nuxt-link to="/login" class="positive register">注册</nuxt-link>
          </li>
        </ul>
        <avatar v-show="authInfo.token"></avatar>
      </div>
    </header>
    <nuxt />
    <footer v-show="showFooter">
      <div class="info-wrap">
        <div>
          <h3>产品</h3>
          <nuxt-link to="zhiyuan" class="href">知涯志愿</nuxt-link>
          <!-- <nuxt-link to="volunteer" class="href">知涯志愿</nuxt-link> -->
          <nuxt-link to="xuankecode" class="href">知涯选科</nuxt-link>
          <a>一分钟说</a>
        </div>
        <div>
          <h3>系列</h3>
          <a>知涯杂谈</a>
          <a>知涯名师</a>
          <a>知涯问答</a>
          <a>知涯大学</a>
          <a>知涯海角</a>
        </div>
        <div>
          <h3>公司</h3>
          <nuxt-link to="about" class="href">关于我们</nuxt-link>
        </div>
        <div>
          <h3>联系方式</h3>
          <div class="mail">
            <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/footer/mail.png" alt="">
            <a href="javascript:void(0);">
              info@junyanginfo.com
            </a>
          </div>
          <div class="tel">
            <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/footer/tel.png" alt="">
            <a href="javascript:void(0);">
              400-9682-686
            </a>
          </div>
          <!-- <div class="address">
            <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/footer/address.png" alt="">
            <a href="javascript:void(0);">
              湖南省长沙市岳麓区岳麓西大道588号芯城科技园2栋2308室
            </a>
          </div> -->
          <div class="contact-info">
            <div>
              <a href="javascript:void(0);" class="icon qq-icon href" @mouseenter="enter('qq')" @mouseleave="leave">
                <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/qq_2.jpg" alt="" />
              </a>
              <div class="qr-code weibo" :class="qq?'active-code':''">
                <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/qq.jpg" />
              </div>
            </div>
            <div>
              <a href="javascript:void(0);" class="icon weibo-icon href" @mouseenter="enter('weibo')" @mouseleave="leave">
                <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/footer/webo.png" alt="" />
              </a>
              <div class="qr-code weibo" :class="weibo?'active-code':''">
                <img src="http://fdwebhost.oss-cn-huhehaote.aliyuncs.com/image/weibo.svg" />
              </div>
            </div>
            <div>
              <a href="javascript:void(0);" class="icon weixin-icon href" @mouseenter="enter('weixin')" @mouseleave="leave">
                <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/footer/wechat.png" alt="" />
              </a>
              <div class="qr-code weixin" :class="weixin?'active-code':''">
                <img src="http://fdwebhost.oss-cn-huhehaote.aliyuncs.com/image/weixin.svg" />
              </div>
            </div>
            <div>
              <a href="javascript:void(0);" class="icon zhihu-icon href" @mouseenter="enter('zhihu')" @mouseleave="leave">
                <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/toutiao_2.png" alt="" />
              </a>
              <div class="qr-code zhihu" :class="zhihu?'active-code':''">
                <img src="https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/index/toutiao.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <p class="footer-p">
        © 2018 Hunan Junyang Network Technology&nbsp;Co.,ltd&nbsp;&nbsp;|&nbsp;&nbsp;湘ICP备
        <a href="http://www.miitbeian.gov.cn" target="_blank">18013842</a> 号
      </p>
    </footer>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      isLogin: false,
      isShow: false,
      weibo: false,
      weixin: false,
      zhihu: false,
      qq: false,
      showFooter: true
    }
  },
  computed: {
    ...mapState({
      authInfo: 'authInfo'
    })
  },
  methods: {
    login () {
      this.$store.commit('setUser', { token: 1212 })
      this.isLogin = !this.isLogin
    },
    logout () {
      this.isShow = !this.isShow
      this.isLogin = !this.isLogin
    },
    enter (type) {
      switch (type) {
        case 'weibo':
          this.weibo = true
          this.weixin = false
          this.zhihu = false
          this.qq = false
          break
        case 'weixin':
          this.weibo = false
          this.weixin = true
          this.zhihu = false
          this.qq = false
          break
        case 'zhihu':
          this.weibo = false
          this.weixin = false
          this.zhihu = true
          this.qq = false
          break
        case 'qq':
          this.weibo = false
          this.weixin = false
          this.zhihu = false
          this.qq = true
          break
      }
    },
    leave () {
      this.qq = false
      this.weibo = false
      this.weixin = false
      this.zhihu = false
    }
  },
  mounted () {
    this.showFooter = this.$route.name === 'login' ? false : true
    if (this.authInfo.token && !this.showFooter && this.$route.query.type === 'login') {
      location.replace('/')
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/assets/scss/default.scss";
header {
  background: $light;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgba(242, 242, 242, 0.2);
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 60px;
  display: flex;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
  justify-content: space-between;
  align-items: center;
  > a {
    background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/logo.png")
      center no-repeat;
    background-size: cover;
    text-align: left;
    width: 72px;
    height: 25px;
    display: inline-block;
  }
  .right-bar {
    display: flex;
    align-items: center;
  }
  .right-bar > ul {
    display: block;
    padding-right: 10px;
    > li {
      padding-left: 35px;
      float: left;
      font-size: 0;
      > a {
        color: $dark;
        font-size: $size16;
        letter-spacing: 1px;
        line-height: 35px;
        padding: 10px 0;
        &:hover,
        &:focus {
          color: $energized !important;
          text-decoration: none !important;
          background: none !important;
        }
      }
      .register {
        border: 1px solid $positive;
        padding: 5px 20px;
        border-radius: 3px;
      }
    }
    > .right {
      position: relative;
      padding-left: 0;
      cursor: pointer;
      .avatar {
        padding-left: 0px;
        > div {
          margin: 0 9px 0 46px;
        }
      }
    }
  }
}
footer {
  background-color: $light;
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 38px;
  min-width: 1200px;
  .info-wrap {
    display: flex;
    justify-content: center;
    text-align: left;
    > div {
      a {
        color: #b8b8b8;
        cursor: default;
        &.href:hover {
          cursor: pointer;
          text-decoration: underline;
          color: darken(#b8b8b8, 35%);
        }
      }
      &:not(:first-child) {
        margin-left: 200px;
      }
      &:not(:last-child){
        min-width: 100px;
      }
      h3 {
        font-size: 36px;
        font-weight: normal;
        margin-bottom: 30px;
        color: #5c5c5c;
      }
      & > a {
        display: block;
        font-size: $size16;
        letter-spacing: 0.9px;
        margin: 10px 0;
      }
      .mail,
      .tel {
        display: flex;
        align-items: center;
        img {
          // height: 16px;
          width: 20px;
        }
        a {
          margin-left: 15px;
          display: block;
          font-size: 18px;
          letter-spacing: 0.9px;
        }
      }
      .tel {
        margin-top: 6px;
      }
      .contact-info {
        margin-top: 14px;
        display: flex;
        div {
          position: relative;
          &:not(:first-child) {
            margin-left: 30px;
          }
          .icon > img {
            height: 28px;
            width: 28px;
          }
          .qr-code {
            opacity: 0;
            margin: 0 auto;
            position: absolute;
            top: -114px;
            left: -40px;
            width: 100px;
            height: 100px;
            background-color: #f6f6f6;
            z-index: 4;
            transition: all linear 0.5s;
            &:after {
              content: "";
              position: absolute;
              width: 0;
              height: 0;
              border: 8px solid transparent;
              border-top-color: #f6f6f6;
              top: 100%;
              left: 50%;
              margin-left: -7px;
            }
            img {
              height: 100px;
            }
          }
          .active-code {
            opacity: 1;
          }
        }
      }
    }
  }
  .footer-p {
    margin-top: 60px;
    a:hover {
      text-decoration: underline;
    }
  }
}
.fa-page + footer {
  background: #fafafa;
}
</style>
